<template>
  <div v-if="hasdata==0">
  </div>
  <div v-else-if="hasdata==1">
    <v-header>
      <div class="nav-title">
        <h3>{{info.tickersymbol}}</h3>
      </div>
    </v-header>
    <div class="dt-top">
      <div class="cube" v-if="circles&&circles.length>0" @touchstart.stop.prevent="preToggle" @touchmove.stop.prevent="toggleCube">
        <img v-for="(item,idx) in circles" v-show="curridx==idx" :src="item" alt="">
      </div>
      <template v-else>
        <img class="dt-bn" v-lazy="https(info.imageurl)" alt="">
      </template>
      <div class="flex-center widget" v-if="issimple"><img :src="cImg" alt=""><span>{{dateFormat(info.releasedate,'MM.dd')}}</span></div>
    </div>
    <div class="dt-info">
      <p>{{info.shoe+' '+info.name}}</p>
      <template v-if="issimple">
        <p class="dt-price font-price">${{info.retailprice}}</p>
      </template>
      <template v-else>
        <transition name="dt" appear>
          <div class="dt-modal" v-show="showModal" @click.stop.prevent="showModal=!showModal">
            <div><img src="http://m.eyee.com/images/headline/h_shoemain.png" alt="">
              <p>以下各个尺码价格来源于国内外卖家正在出售该鞋款的最低报价，不同尺码的鞋款差价比较大，仅供参考。</p>
              <div><span>我知道了</span></div>
            </div>
          </div>
        </transition>
        <div><span>市场最低报价</span><i class="ico-doubt" @click.stop.prevent="showModal=!showModal"></i></div>
        <div class="btb flex-center dt-size">
          <div>
            <p>最便宜的尺码</p>
            <div class="bold"><span class="font-price" :style="trendColor(info.lowestisup)">${{info.lowestprice}}</span><img :src="trendImg(info.lowestisup)|https" alt=""></div>
            <p>SIZE {{info.lowestsize}}</p>
          </div>
          <div>
            <p>最昂贵的尺码</p>
            <div class="bold"><span class="font-price" :style="trendColor(info.highestisup)">${{info.highestprice}}</span><img :src="trendImg(info.highestisup)|https" alt=""></div>
            <p>SIZE {{info.highestsize}}</p>
          </div>
        </div>
        <p class="dt-hint">注：当前价格与上期市场价相比，<span style="color:#af3c03;">红色</span>呈上升趋势，<span style="color:#0ebd06;">绿色</span>呈下降趋势。</p>
        <p style="font-size:18px;">{{info.sizestand}}</p>
        <p>(所有尺码最低价)</p>
        <ul v-if="sizes&&sizes.length>0">
          <li class="flex-center" v-for="item in sizes" :key="item.size">
            <p>{{item.size}}</p>
            <p class="dt-sp font-price" v-if="item.price>0">${{item.price}}</p>
            <p v-else>---</p>
          </li>
        </ul>
      </template>
      <div class='dt-dtl btb'>
        <p class="black">鞋款颜色</p>
        <p>{{info.colorway}}</p>
        <div class="flex-center">
          <div>
            <p class="black">货号</p>
            <p>{{info.styleid}}</p>
          </div>
          <div>
            <p class="black">官方发售价</p>
            <p>${{info.retailprice}}</p>
          </div>
          <div>
            <p class="black">发售日期</p>
            <p>{{dateFormat(info.releasedate,'yyyy.M.d')}}</p>
          </div>
        </div>
      </div>
      <template v-if="issimple">
        <Comments :comments="commentList" :lengComt="commentCount"></Comments>
        <Comment-fixed :comtscount="commentCount"></Comment-fixed>
      </template>
      <template v-else>
        <div class="dt-descr" v-if="info.description&&info.description!=''">
          <p>鞋款介绍</p>
          <p>{{info.description}}</p>
        </div>
        <router-link class="dt-link" to="/shoe" tag="div">查看更多鞋款</router-link>
      </template>
    </div>
  </div>
  <v-error v-else></v-error>
</template>
<script>
import { DateFormat } from '../../../common/util'
import { StockXInfo } from '../../../common/api/stock'
import { ArticleComments } from '../../../common/api/article'
import Comments from '../../templates/Comments'
import CommentFixed from '../../templates/CommentFixed'
export default {
  components: { Comments, CommentFixed },
  data() {
    return {
      hasdata: 0,
      cImg: '//files.eyee.com/mcdn/static/img/calendar_h.png', // require('../../../assets/img/calendar_h.png'),
      flatImg: '//files.eyee.com/mcdn/static/img/trend_flat.png', // require('../../../assets/img/trend_flat.png'),
      upImg: '//files.eyee.com/mcdn/static/img/trend_up.png', // require('../../../assets/img/trend_up.png'),
      downImg: '//files.eyee.com/mcdn/static/img/trend_down.png', // require('../../../assets/img/trend_down.png'),
      info: {},
      sizes: [],
      circles: [],
      curridx: 0,
      posX: 0,
      showModal: false,
      issimple: false,
      commentList: [],
      commentCount: 0,
      dateFormat: DateFormat
    }
  },
  mounted() {
    let param = this.$route.params
    // console.log('detail id', param);
    if (param && param.id && param.id.trim().length > 30) {
      if (param.type && parseInt(param.type) === 1) this.issimple = true
      StockXInfo({ id: param.id }).then(res => {
        console.log('StockX Detail result', res)
        if (res && res.info) {
          this.info = res.info
          if (res.info.circleurls && res.info.circleurls.length > 0) {
            this.circles = res.info.circleurls.split(',')
            setTimeout(() => { this.autoToggle() }, 300)
          }
          this.hasdata = 1
          var shareHtml = res.info.shoe + ' ' + res.info.name
          this.initShare({ type: 0, info: { img: res.info.imageurl, desc: shareHtml }})
          if (res.info.sizes && res.info.sizes.length > 0) {
            this.sizes = res.info.sizes.split('|').map(i => {
              let item = i.split(':')
              return { size: item[0], price: item[1] }
            }).sort((a, b) => { return a.size - b.size })
            // console.log('info.sizes.split', this.sizes);
          }
        } else this.hasdata = 2
      }).catch(e => { this.hasdata = 2; this.toast(e && e.msg ? e.msg : ('error:' + e)) })
      ArticleComments({ articleid: param.id }).then(res => {
        // console.log('comments result', res);
        if (res && res.list && res.list.length > 0) {
          this.commentList = res.list
          this.commentCount = res.sumcount
        }
      })
    } else { this.hasdata = 2; this.toast('异常参数') }
  },
  methods: {
    trendImg(trend) {
      return trend == 0 ? this.downImg : (trend == 1 ? this.upImg : this.flatImg)
    },
    trendColor(trend) {
      return 'color:#' + (trend == 0 ? '0ebd06' : (trend == 1 ? 'af3c03' : '000')) + ';'
    },
    autoToggle() {
      let timer = setInterval(() => {
        if (this.curridx >= this.circles.length - 1) {
          this.curridx = 0
          clearInterval(timer)
        } else this.curridx++
      }, 50)
    },
    preToggle(event) { this.posX = event.changedTouches[0].pageX },
    toggleCube(event) {
      let posX = event.changedTouches[0].pageX, dir = posX - this.posX
      if (Math.abs(dir) > 10) {
        if (dir < 0) {
          if (this.curridx >= this.circles.length - 1) this.curridx = 0
          else this.curridx++
        } else {
          if (this.curridx <= 0) this.curridx = this.circles.length - 1
          else this.curridx--
        }
        this.posX = posX
      }
    }
  }
}
</script>
<style scoped>
.dt-enter,
.dt-leave-active {
  opacity: 0;
}

.dt-enter-active {
  transition: opacity .3s ease;
}

.dt-leave-active {
  transition: opacity .3s linear;
}

.dt-modal {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.dt-modal>div {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
}

.dt-modal>div div {
  padding: 10px;
  border-top: 1px solid #eee;
}

.dt-modal p {
  padding: 15px 20px;
  line-height: 20px;
  font-size: 12px;
}

.dt-modal span {
  color: #2bc0f3;
  font-size: 16px;
}

.dt-top,
.cube {
  position: relative;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
}

.ico-doubt {
  margin: 0 5px;
}

.cube img,
.dt-bn {
  position: absolute;
  width: 85%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dt-bn {
  width: 70%;
}

.widget {
  position: absolute;
  top: 20px;
  right: 0;
  width: 86px;
  height: 40px;
  border-radius: 4px 0 0 4px;
  background-color: rgba(0, 0, 0, .5);
}

.widget img {
  width: 18px;
}

.widget span {
  font-size: 18px;
  font-weight: bold;
  color: #ffc700;
  padding-left: 5px;
}

.dt-info {
  text-align: center;
  font-size: 13px;
  color: #666;
}

.dt-info ul {
  display: flex;
  flex-wrap: wrap;
  padding: 2%;
}

.dt-info li {
  flex-direction: column;
  margin: 2%;
  width: 21%;
  padding: 10px;
  border: 1px solid #eee;
}

.dt-info li p {
  line-height: 20px;
  font-weight: 600;
}

.dt-info li p:first-of-type {
  font-size: 15px;
}

.dt-sp {
  color: #ffc700;
}

.dt-info>p {
  padding: 5px 20px;
}

.dt-info>p:first-of-type {
  font-size: 20px;
  color: #000;
  font-weight: 600;
}

.dt-price {
  color: #af3c03;
  font-size: 30px;
  font-weight: bold;
}

.btb {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.black {
  color: #000;
  font-weight: 600;
}

.dt-size {
  text-align: left;
  margin: 10px 0;
  justify-content: space-around;
}

.dt-size img {
  width: 14px;
  margin: 0 5px;
}

.dt-size>div {
  padding-left: 13%;
  flex: 1;
}

.dt-size>div:first-of-type {
  border-right: 1px solid #eee;
}

.dt-dtl {
  padding: 20px 0;
  margin: 20px 0;
}

.dt-dtl p,
.dt-size>div>*,
.dt-descr p {
  line-height: 25px;
}

.dt-hint {
  font-size: 10px;
  margin-bottom: 20px;
}

.dt-dtl>div {
  margin-top: 10px;
}

.dt-dtl>div div {
  flex: 1;
}

.dt-descr {
  padding: 10px;
  margin-bottom: 20px;
}

.dt-descr p:last-of-type {
  text-align: left;
}

.dt-link {
  background-color: #000;
  color: #fff;
  line-height: 40px;
}
</style>
